<template>
	<div class="shop">
<!-- 		<ul class="nav">
			<li class="nav-item" :class="{'n-active':current == 0}" @click="changeTab(0)">小店概况</li>
			 <li class="nav-item" :class="{'n-active':current == 1}" @click="changeTab(1)">数据推送</li> 
		</ul> -->
		<div class="content" v-show="current === 1">
			<div class="btn-warrp">
				<div class="btn-right"><i class="el-icon-plus"></i>绑定应用号</div>
			</div>
			<el-table
		    border
		    style="width: 100%">
		    <el-table-column
		      prop="date"
		      label="应用号"
		      width="180">
		    </el-table-column>
		    <el-table-column
		      prop="name"
		      label="昵称"
			>
		    </el-table-column>
		    <el-table-column
		      prop="address"
		      label="操作"
		      width="180">
		    </el-table-column>
		  </el-table>
		</div>
		<div class="content-1" v-loading="loading" v-show="current === 0">
			<div class="top-bar">
				<div class="left">
					<div class="title">
						<span class="icon iconfont">&#xe897;</span>
						<span class="num">{{orderInfo.waitdeli}}</span>
					</div>
					<p class="desc">待发货订单</p>
				</div>				
				<div class="right">
					<div class="title">
						<span class="icon iconfont">&#xe62f;</span>
						<span class="num">{{orderInfo.justice}}</span>
					</div>
					<p class="desc">待处理维权/仲裁单数</p>
				</div>
			</div>
			<div class="visit-con">
				<div class="title">
					<div class="title-left">昨日关键指数</div>
					<div class="title-right"></div>
				</div>
				<div class="visit-num-warrp">
					<div class="visit-item">
						<h5 class="visit-title">订单数</h5>
						<div class="visit-num">{{orderInfo.lastorder}}</div>
					</div>					
					<div class="visit-item">
						<h5 class="visit-title">成交商品数</h5>
						<div class="visit-num">{{orderInfo.lastorderitem}}</div>
					</div>					
					<div class="visit-item">
						<h5 class="visit-title">成交额</h5>
						<div class="visit-num">{{orderInfo.total}}</div>
					</div>					
					<div class="visit-item">
						<h5 class="visit-title">商品浏览量</h5>
						<div class="visit-num">0</div>
					</div>					
					<div class="visit-item">
						<h5 class="visit-title">货架浏览量</h5>
						<div class="visit-num">0</div>
					</div>					
					<div class="visit-item" >
						<h5 class="visit-title" style="border: none;">小店访问人数</h5>
						<div class="visit-num">0</div>
					</div>					
				</div>
			</div>
			<div class="chart-con">
				<div class="chart-title">
					<span class="title-item">关键指标趋势图</span>
					<span class="title-item" :class="{'t-active':currentTime1 == 30}" @click="queryByDate(30)">最近30日</span>
					<span class="title-item" :class="{'t-active':currentTime1 == 15}" @click="queryByDate(15)">最近15日</span>
					<span class="title-item" :class="{'t-active':currentTime1 == 7}" @click="queryByDate(7)">最近7日</span>
					<el-date-picker
				      v-model="chartTime"
				      type="daterange"
				      @change="getChartTime"
            		  value-format="timestamp"
				      start-placeholder="开始日期"
				      end-placeholder="结束日期">
				    </el-date-picker>
				    <el-select v-model="chartType" placeholder="请选择">
					    <el-option
						     v-for="item in options"
						     :key="item.value"
						     :label="item.label"
						     :value="item.value">
					    </el-option>
				  </el-select>
				</div>
				<div class="chart-con">
					 <vue-chart type="line" :options="chartOption" :data="chartData"></vue-chart>
				</div>
			</div>
			<div class="table-warrp">
				<div class="table-title">
					<span class="title-item">关系指标明细 <span>下载</span></span>
					<span class="title-item" :class="{'t-active':currentTime2 == 30}" @click="getTableList(30)">最近30日</span>
					<span class="title-item" :class="{'t-active':currentTime2 == 15}" @click="getTableList(15)">最近15日</span>
					<span class="title-item" :class="{'t-active':currentTime2 == 7}" @click="getTableList(7)">最近7日</span>
					<el-date-picker
				      v-model="tableTime"
				      type="daterange"
				      @change="getTableTime"
				      start-placeholder="开始日期"
				      value-format="timestamp"
				      end-placeholder="结束日期">
				    </el-date-picker>
				</div>
				<el-table
					:data="tableList"
				    style="width: 100%">
				    <el-table-column
				      prop="day"
				      label="日期"
				      sortable
					>
				    </el-table-column>
				    <el-table-column
				      prop="ordercount"
				      label="订单数"
				      width="180"
				      sortable
				      :row-style="'text-align:right'">
				    </el-table-column>			    
				    <el-table-column
				      prop="goods"
				      label="成交商品数"
				      :row-style="'text-align:right'">
				    </el-table-column>			    
				    <el-table-column
				      prop="turnover"
				      label="成交额"
				      :row-style="'text-align:right'">
				    </el-table-column>			   
				    <el-table-column
				      prop="pageview"
				      label="商品浏览量"
				      :row-style="'text-align:right'">
				    </el-table-column>		     
				    <el-table-column
				      prop="visitors"
				      label="小店访问人数"
				      :row-style="'text-align:right'">
				    </el-table-column>
		  		</el-table>
			</div>
		</div>
	</div>
</template>
<script>
	import {getCookie} from '../../../../assets/js/cookie.js'
	export default{
		name : 'Shop',
		data(){
			return{
				loading          : true,
				pendDeliveryNum  : 0,//待发货订单
				maintainNum      : 0,//待维权数量
				orderNum 		 : 0,//订单数
				dealNum  		 : 0,//成交数
				dealQuota		 : 0,//成交额度
				goodsBrowseNum	 : 0,//商品浏览量
				shelvesBrowseNum : 0,//货架浏览量
				dates            : '',//图标的刷选天数
				chartDatas       : '',//保存后台返回的图表数据
				chartType 		 : 0,//按类型查看图表
				chartTime 		 : '',//自定义时间查看图表
				tableTime 		 : '',//自定义时间查看表格
				times : '',
				current: 0,
				options : [
					{
						label:'订单数',
						value : 0
					},					
					{
						label:'成交商品数',
						value : 1
					},					
					{
						label:'成交额',
						value : 2
					},				
					{
						label:'商品浏览量',
						value : 3
					},					
					{
						label:'小店浏览量',
						value : 4
					}
				],
				chartData :{
					labels   : [],
					datasets : []
				},
				orderInfo : {},
				tableList : [],
				chartOption : {
					responsive: true
				},
				currentTime1 : 7,
				currentTime2 : 7
			}
		},
		props:['data'],
		mounted(){
			this.uid     = getCookie('UID')
			this.token   = getCookie('TOKEN')
			this.shop_id = this.data.id
			this.getOrderInfo()
			this.queryByDate()
			this.getTableList()
		},
		watch:{
			chartType(){
				this.chartData.datasets = [this.chartDatas.date[this.chartType]]
			}
		},
		methods:{
			changeTab(index){
				this.current = index 
			},
			//获取用户信息
			getUserInfo(){
				let userinfo = {
					uid 	: this.uid,
					token   : this.token,
					shop_id : this.shop_id
				} 
				return userinfo
			},
			//获取订单基本信息
			getOrderInfo(){
				let userinfo = this.getUserInfo()
				this.$axiosGet('/platform/vdo/index.json',userinfo,true).then( res =>{
					if(res.code === 200){
						this.orderInfo = res.data
					}
				})
			},
			//监听图标自定义时间的改变
			getChartTime(date){
				this.chartTime = date
				this.queryByDate('0',date[0],date[1])				
			},
			//按时间显示图标的数据
			queryByDate(dates,start,end){
				this.currentTime1 = dates
				this.chartData.datasets = []
				this.chartData.labels = []
				let userinfo  = this.getUserInfo()
				userinfo.day  = dates  || 7
				userinfo.start = start || 0
				userinfo.end   = end   || 0
				this.$axiosGet('/platform/vdo/trend.json',userinfo,true).then( res =>{
					if(res.code === 200){
						this.chartDatas 		= res.data
						this.chartData.labels   = res.data.label
						this.chartData.datasets = [res.data.date[0]]
					}
				})

			},
			//监听图标自定义时间的改变
			getTableTime(date){
				this.tableTime = date
				this.getTableList('0',date[0],date[1])				
			},
			//获取表格的数据
			getTableList(dates,start,end){
				this.currentTime2 = dates
				let userinfo = this.getUserInfo()
				userinfo.day   = dates || 7
				userinfo.start = start || 0
				userinfo.end   = end   || 0
				this.$axiosGet('/platform/vdo/table.json',userinfo,true).then( res => {
					this.loading = false
					if(res.code === 200){
						this.tableList = res.data
					}
					if(res.code === 404){
						this.tableList = []
					}
				})
			}
		}


	}
</script>
<style lang="less" scoped>
	@activeColor:#8da7d0;
	.shop /deep/ .el-date-editor{
		width: 280px;
		background: #f2f3f7;
		border: none;
	}
	.shop /deep/ .el-range-input{
		background: #f2f3f7;
	}	
	.shop /deep/ .el-input__inner{
		border: none;
		background: #f2f3f7;
	}	
	.shop /deep/ .el-select{
		width: 150px;
		border: none;
	}
	.nav{
		padding: 10px 0;
		overflow: hidden;
		background: #f6f8f9;
		list-style: none;
	}
	.nav .nav-item{
		float: left;
		padding: 0 15px;
		font-size: 12px;
		cursor: pointer;
	}	
	.nav .n-active{
		color:#1a90ea;
	}
	.nav-item:nth-of-type(1){
		border-right: 1px solid #e0e1e3;
	}
	.content{
		margin: 0 auto;
		width: 95%;
	}
	.btn-warrp{
		overflow: hidden;
	}
	.btn-warrp .btn-right{
		float: right;
		margin: 15px 0;
		height: 30px;
		width: 120px;
		line-height: 30px;
		text-align: center;
		background: #3ca0ec;
		color: #fff;
	}
	.content-1{
		width: 95%;
		margin: 0 auto;
		text-align: left;
		.top-bar{
			padding: 0 200px;
			margin-top: 20px;
			overflow: hidden;
			height: 110px;
			background: #3ca0ec;
			color: #fff;
			.left{
				float: left;
				margin-top: 20px;
				.title{
					text-align: center;
				}
				.icon,.num{
					font-size: 32px;
				}
			}
			.right{
				float: right;
				margin-top: 20px;
				.title{
					text-align: center;
				}
				.num,.icon{
					font-size: 32px;
				}
			}
		}
		.visit-con{
			margin-top: 20px;
			border: 1px solid #f1f1f3;
			.title{
				overflow: hidden;
				padding: 8px 15px;
				background: #f4f5f9;
				font-size: 14px;
				.title-left{
					float: left;
				}
				.title-right{
					float: right;
				}
			}
			.visit-num-warrp{
				display: flex;
				padding: 25px 0;
				.visit-item{
					flex:1;
					text-align: center;
					.visit-title{
						margin-bottom: 15px;
						border-right: 1px solid #a29c9f;
						color: #a29c9f;
					}
				}
			}
		}
		.chart-con{
			margin-top: 20px;
			border: 1px solid #dcdfe6;
			.chart-title{
				background: #f4f5f9;
				font-size: 14px;
				.title-item{
					display: inline-block;
					height: 30px;
					line-height: 30px;
					padding:0 20px;
					border-right: 1px solid #dcdfe6;
					cursor: pointer;
				}
				.t-active{
					color:@activeColor;
				}
				.active{
					color: #5f759f;
				}
			}
		}
		.table-warrp{
			margin-top: 20px;
			border: 1px solid #dcdfe6;
			.table-title{
				background: #f4f5f9;
				font-size: 14px;
				.title-item{
					display: inline-block;
					height: 30px;
					line-height: 30px;
					padding:0 20px;
					border-right: 1px solid #dcdfe6;
					cursor: pointer;
				}
				.t-active{
					color:@activeColor;
				}
			}
		}
	}
</style>